<template>
	<view class="mine">
		<view style="margin-top: 11rpx;">
			<view class="list">
				<view class="list-detail">
					<view style="width: 187rpx;">个人寸照</view>
				</view>
				<view class="herder-logo" @click="select()">
					<image class="logo-image" :src="userInfo.userFrontHeadPortrait" mode="scaleToFill"></image>
					<image src="../../static/image/right.png" class="right"></image>
				</view>
			</view>
			<ksp-cropper mode="free" :width="200" :height="140" :maxWidth="1024" :maxHeight="1024" :url="url"
				@cancel="oncancel" @ok="onok" :isUpload="isUpload"></ksp-cropper>

			<view class="list" @click="navTo('/pages/setUp/updatePhone/updatePhone')">
				<view class="list-detail">
					<view style="width: 187rpx;">修改手机</view>
					<view class="cont-all">{{userInfo.userTel}}</view>
				</view>
				<image src="../../static/image/right.png" class="right"></image>
			</view>
			<view class="list" @click="navTo('/pages/setUp/updatePwd/updatePwd')">
				<view class="list-detail">
					<view style="width: 187rpx;">修改密码</view>
					<view class="cont-all">密码强度：{{pwdText}}</view>
				</view>
				<image src="../../static/image/right.png" class="right"></image>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		pathToBase64,
		base64ToPath
	} from '../../utils/image-tool.js';
	import kspCropper from '../ksp-cropper/components/ksp-cropper/ksp-cropper.vue'
	// import apis from '@/apis/index';
	export default {
		comments:{
			kspCropper
		},
		data() {
			return {
				isUpload: false,
				iconflag: false,
				// company: uni.getStorageSync('orgDeta'),
				userInfo: null,
				user_id: uni.getStorageSync('rawData').userId,
				pwdText: null,
				img: [], //上传完后的图片
				phone: null,
				name: null,
				edition_number: null,
				url: "",
				path: "",
			};
		},
		onShow() {
			this.$forceUpdate()
			this.userInfo = uni.getStorageSync('rawData')
			console.log('this.userInfo', this.userInfo)
			this.pwdText = uni.getStorageSync('pwdText')
			let _this = this;
			let rawData = uni.getStorageSync('rawData');
			console.log(rawData)
			// this.phone = rawData.userTel;
			// if (uni.getStorageSync('changePhone')) {
			// 	this.phone = '请切换手机号'
			// }
			if (rawData) {
				// rawData = JSON.parse(rawData)
				_this.pic = rawData.userHeadPortrait
				_this.name = rawData.userNickname
				_this.phone = rawData.userTel
				_this.login = true
			} else {
				_this.pic = null
				_this.name = null
				_this.phone = null
				_this.login = false
			}
			console.log(this.name)


		},
		// onShow() {
		// 	// this.company = JSON.parse(uni.getStorageSync('orgDeta'))
		// 	console.log(this.userInfo.userTel)
		// 	// console.log(uni.getStorageSync('orgDeta'),'000')
		// },
		methods: {
			select() {
				uni.chooseImage({
					count: 1,
					success: (rst) => {
						// 设置url的值，显示控件
						this.isUpload = true;
						this.url = rst.tempFilePaths[0];
					}
				});
			},
			onok(ev) {
				this.url = "";
				this.path = ev.path;
				let that = this;
				pathToBase64(this.path).then(res => {
					that.$request.api
						.uploadImage({
							imageBase64: res
						})
						.then(data => {
							that.$request.api
								.updateImage({
									user_id: that.user_id,
									user_front_head_portrait: data.data.data
								}).then(res => {
										let userInfo = that.userInfo;
										userInfo.userHeadPortrait = data.data.data;
										uni.setStorageSync('rawData', userInfo)

										uni.showToast({
											title: '修改成功',
											duration: 2000,
											icon: 'none'
										});
									},
									err => {
										this.loading = true;
										uni.showToast({
											title: err.errorMessage,
											duration: 2000,
											icon: 'none'
										});
										return;
									}
								);
						});
				});
			},
			oncancel() {
				// url设置为空，隐藏控件
				this.url = "";
				this.isUpload = false;
				console.log('======url======')
			},
			//上传图片
			uploadImg() {
				let that = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						that.img.push(res.tempFilePaths[0]);
						//file转base64
						pathToBase64(res.tempFilePaths[0]).then(res => {
							that.$request.api
								.uploadImage({
									imageBase64: res
								})
								.then(data => {
									let userInfo = that.userInfo;
									userInfo.userHeadPortrait = data.data.data;
									uni.setStorageSync('rawData', userInfo)

									that.$request.api
										.updateImage({
											user_id: that.user_id,
											user_head_portrait: data.data
										}).then(res => {
												uni.showToast({
													title: '修改成功',
													duration: 2000,
													icon: 'none'
												});
											},
											err => {
												this.loading = true;
												uni.showToast({
													title: err.errorMessage,
													duration: 2000,
													icon: 'none'
												});
												return;
											}
										);
								});
						});
					}
				});
			},
			//跳转
			navTo(url) {
				// uni.redirectTo({
				// 	url: url
				// })
				uni.navigateTo({
					url: url
				})
			},

		}
	};
</script>

<style lang="scss">
	.mine {
		::v-deep uni-image div {
			// background-size: contain !important;
			// background-position: 0% 0% !important;
		}

		.list {
			padding: 0 36rpx 0 31rpx;
			background: #FFF;
			line-height: 120rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 500;
			color: #333333;
			font-size: 32rpx;
			border-bottom: 1rpx solid #EEEEEE;

			.cont-all {
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				text-shadow: 0rpx 2rpx 0rpx #EEEEEE;
			}

			.list-detail {
				display: flex;
				align-items: center;

				.left {
					width: 48rpx;
					height: 48rpx;
					margin-right: 25rpx;
				}
			}

			.herder-logo {
				display: flex;
				align-items: center;

				.logo-image {
					width: 60rpx;
					height: 60rpx;
					background: #D8D8D8;
					border-radius: 30rpx;
					margin-right: 29rpx;
				}

				.right {
					width: 22rpx;
					height: 36rpx;
				}
			}

			.right {
				width: 22rpx;
				height: 36rpx;
			}
		}
	}
</style>